<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

    <div class="layout-config">
        <div class="layout-config-content-wrapper">
            <a href="#" class="layout-config-button">
                <i class="pi pi-cog"></i>
            </a>
            <a href="#" class="layout-config-close">
                <i class="pi pi-times"></i>
            </a>

            <div class="layout-config-content">
                <div class="free-themes">
                    <h1 style="margin-top: 0">FREE THEMES</h1>
                    <p>Built-in component themes created by the <a href="https://www.primefaces.org/designer/primefaces">PrimeFaces Theme Designer</a>.</p>
                    <h:form id="config-form">
                        <div class="p-grid">
                            <ui:repeat value="#{themeSwitcherView.themes}" var="theme">
                                <div class="p-col-3">
                                    <p:commandLink 
                                        actionListener="#{guestPreferences.setTheme(theme.name)}"
                                        oncomplete="PrimeFaces.ShowcaseConfigurator.changeTheme('#{theme.name}')"
                                        update=":config-form">

                                        <h:graphicImage name="showcase/images/themeswitcher/themeswitcher-#{theme.name}.png" alt="#{theme.name}"/>
                                        <ui:fragment rendered="#{guestPreferences.theme == theme.name}">
                                            <i class="pi pi-check"></i>
                                        </ui:fragment>
                                    </p:commandLink>
                                    <span>#{theme.displayName}</span>
                                </div>
                            </ui:repeat>
                        </div>
                    </h:form>
                </div>

                <div class="premium-themes">
                    <h1>PREMIUM TEMPLATES</h1>
                    <p>Create awesome applications in no time using the premium templates and impress your users.</p>
                    <div class="p-grid">
                        <div class="p-col-6">
                            <a target="_blank" href="https://www.primefaces.org/layouts/mirage">
                                <p:graphicImage name="images/mirage-store-400.png" library="showcase"/>
                            </a>
                        </div>
                        <div class="p-col-6">
                            <a target="_blank" href="https://www.primefaces.org/layouts/prestige">
                                <p:graphicImage name="images/prestige-store-400.png" library="showcase" />
                            </a>
                        </div>
                        <div class="p-col-6">
                            <a target="_blank" href="https://www.primefaces.org/layouts/sapphire">
                                <p:graphicImage name="images/sapphire-store-400.png" library="showcase" />
                            </a>
                        </div>
                        <div class="p-col-6">
                            <a target="_blank" href="https://www.primefaces.org/layouts/roma">
                                <p:graphicImage name="images/roma-store-400.png" library="showcase" />
                            </a>
                        </div>
                        <div class="p-col-6">
                            <a target="_blank" href="https://www.primefaces.org/layouts/babylon">
                                <p:graphicImage name="images/babylon-store-400.png" library="showcase" />
                            </a>
                        </div>
                        <div class="p-col-6">
                            <a target="_blank" href="https://www.primefaces.org/layouts/olympia">
                                <p:graphicImage name="images/olympia-store-400.png" library="showcase" />
                            </a>
                        </div>
                        <div class="p-col-6">
                            <a target="_blank" href="https://www.primefaces.org/layouts/manhattan">
                                <p:graphicImage name="images/manhattan-store-400.png" library="showcase" />
                            </a>
                        </div>
                        <div class="p-col-6">
                            <a target="_blank" href="https://www.primefaces.org/layouts/ecuador">
                                <p:graphicImage name="images/ecuador-store-400.png" library="showcase" />
                            </a>
                        </div>
                        <div class="p-col-6">
                            <a target="_blank" href="https://www.primefaces.org/layouts/harmony">
                                <p:graphicImage name="images/harmony-store-400.png" library="showcase" />
                            </a>
                        </div>
                        <div class="p-col-6">
                            <a target="_blank" href="https://www.primefaces.org/layouts/california">
                                <p:graphicImage name="images/california-store-400.png" library="showcase" />
                            </a>
                        </div>
                        <div class="p-col-6">
                            <a target="_blank" href="https://www.primefaces.org/layouts/apollo">
                                <p:graphicImage name="images/apollo-store-400.png" library="showcase" />
                            </a>
                        </div>
                        <div class="p-col-6">
                            <a target="_blank" href="https://www.primefaces.org/layouts/serenity">
                                <p:graphicImage name="images/serenity-store-400.png" library="showcase" />
                            </a>
                        </div>
                        <div class="p-col-6">
                            <a target="_blank" href="https://www.primefaces.org/layouts/avalon">
                                <p:graphicImage name="images/avalon-store-400.png" library="showcase" />
                            </a>
                        </div>                
                        <div class="p-col-6">
                            <a target="_blank" href="https://www.primefaces.org/layouts/paradise">
                                <p:graphicImage name="images/paradise-store-400.png" library="showcase" />
                            </a>
                        </div>
                        <div class="p-col-6">
                            <a target="_blank" href="https://www.primefaces.org/layouts/ultima">
                                <p:graphicImage name="images/ultima-store-400.png" library="showcase" />
                            </a>
                        </div>
                        <div class="p-col-6">
                            <a target="_blank" href="https://www.primefaces.org/layouts/barcelona">
                                <p:graphicImage name="images/barcelona-store-400.png" library="showcase" />
                            </a>
                        </div>
                        <div class="p-col-6">
                            <a target="_blank" href="https://www.primefaces.org/layouts/morpheus">
                                <p:graphicImage name="images/morpheus-store-400.png" library="showcase" />
                            </a>
                        </div>
                        <div class="p-col-6">
                            <a target="_blank" href="https://www.primefaces.org/layouts/verona">
                                <p:graphicImage name="images/verona-store-400.png" library="showcase" />
                            </a>
                        </div>
                        <div class="p-col-6">
                            <a target="_blank" href="https://www.primefaces.org/layouts/atlantis">
                                <p:graphicImage name="images/atlantis-store-400.png" library="showcase" />
                            </a>
                        </div>
                        <div class="p-col-6">
                            <a target="_blank" href="https://www.primefaces.org/layouts/poseidon">
                                <p:graphicImage name="images/poseidon-store-400.png" library="showcase" />
                            </a>
                        </div>
                        <div class="p-col-6">
                            <a target="_blank" href="https://www.primefaces.org/layouts/omega">
                                <p:graphicImage name="images/omega-store-400.png" library="showcase" />
                            </a>
                        </div>
                        <div class="p-col-6">
                            <a target="_blank" href="https://www.primefaces.org/layouts/icarus">
                                <p:graphicImage name="images/icarus-store-400.png" library="showcase" />
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</ui:composition>